<template>
  <div class="opinions-suggestions-container">
    <HeaderIndex title="意见建议" />
    <div class="form-info">
      <div class="form-info-list">
        <div class="form-info-item targeting-issues">
          <span>针对问题<span class="required-active">*</span></span>
          <span>
            <van-dropdown-menu active-color="#429df8">
              <van-dropdown-item
                :title="opinionsObj.question"
                v-model="opinionsObj.question"
                :options="targetingIssuesList"
              />
            </van-dropdown-menu>
          </span>
        </div>
        <div class="form-info-item">
          <span>建议标题<span class="required-active">*</span></span>
          <span><input type="text" placeholder="请输入建议标题" v-model="opinionsObj.title" /></span>
        </div>
        <div class="form-info-item suggested-description">
          <span>建议描述</span>
          <span>
            <van-field
              v-model="opinionsObj.content"
              rows="4"
              autosize
              placeholder="请输入建议描述"
              type="textarea"
            />
          </span>
        </div>
      </div>
      <van-button
        class="submit"
        :loading="loading"
        type="info"
        text="提交"
        loading-text="加载中..."
        @click="handleSubmit"
      />
    </div>
  </div>
</template>

<script>
import HeaderIndex from "@/components/header";
import { addOptimizeAdvise } from "@/api";
import { Toast } from "@/utils";
export default {
  name: "OpinionsSuggestions",
  components: {
    HeaderIndex,
  },
  data() {
    return {
      opinionsObj: {
        question: "", //选中的问题
        title: "", //意见建议标题
        content: "", //描述信息
      },
      targetingIssuesList: [
        //针对问题列表
        { text: "请选择问题", value: "" },
        { text: "页面", value: "页面" },
        { text: "操作", value: "操作" },
        { text: "功能", value: "功能" },
        { text: "其它", value: "其它" },
      ],
      loading: false, //提交按钮是否显示加载中效果
    };
  },
  methods: {
    /**
     * 提交意见建议信息
     */
    async submitAddOptimizeAdvise() {
      try {
        this.loading = true;
        await addOptimizeAdvise(this.opinionsObj);

        Toast.customToast({
          type: "success",
          message: "提交成功",
          onClose: () => {
            //关闭时的回调函数 返回上一页
            this.$router.go(-1);
          },
        });
      } finally {
        this.loading = false;
      }
    },

    /**
     * 提交校验
     */
    handleSubmit() {
      const { question, title, content } = this.opinionsObj;
      if (!question) {
        Toast.fail("请选择针对问题");
      } else if (!title) {
        Toast.fail("建议标题不能为空");
      } else if (title.length > 50) {
        Toast.fail("建议标题不能超过50个字");
      } else if (content.length > 500) {
        Toast.fail("建议描述的内容不能超过500个字符");
      } else {
        this.submitAddOptimizeAdvise();
      }
    },
  },
};
</script>

<style lang="less">
@import url("~@/assets/styles/resetComponentStyle.less");
</style>
<style lang="less" scoped>
@import url("~@/assets/styles/opinionsSuggestions/index.less");
</style>